//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：spinkitModal.js
// 创建时间：2016年09月27日
// 创建人员：Panda
// 功能说明：spinkit modal
//################################

'use strict';

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Dimensions,
} from 'react-native';

import Spinner from 'react-native-spinkit';
import PubSub from 'pubsub-js';

import Modal from '../modal';
import {
    Colors,
    UIConstants,
    PubSubTopics,
} from '../../common';

const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;

class SpinkitModal extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            isOpen: false,
            message: '',
        };
    }

    componentDidMount() {
        this.onSpinkitModalOpenEvent = PubSub.subscribe(PubSubTopics.SPINKIT_MODAL_OPEN, (event, message) => {this.onSpinkitModalOpenHandler(message)});
        this.onSpinkitModalCloseEvent = PubSub.subscribe(PubSubTopics.SPINKIT_MODAL_CLOSE, () => {this.onSpinkitModalCloseHandler()});
    }
    
    componentWillUnmount() {
        PubSub.unsubscribe(this.onSpinkitModalOpenEvent);
        PubSub.unsubscribe(this.onSpinkitModalCloseEvent);
    }
    
    onSpinkitModalOpenHandler(message) {
        this.setState({
            isOpen: true,
            message: message,
        });

        // setTimeout(() => {
        //     this.onSpinkitModalCloseHandler();
        // }, 5000);
    }

    onSpinkitModalCloseHandler() {
        this.setState({
            isOpen: false,
            message: '',
        });
    }

    openModal() {
        this.setState({
            isOpen: true,
        });
    }

    closeModal() {
        this.setState({
            isOpen: false,
        });
    }
    
    render() {
        return (
            <Modal isOpen={this.state.isOpen} backdropPressToClose={false} isBackdropColorTransparent={true} cannotBeClosedOnBack={true}>
                <View style={styles.container}>
                    <View style={styles.innercontainer}>
                        <View style={styles.indicatorview}>
                            <Spinner style={styles.spinner} isVisible={this.state.isOpen} size={60} type={'Wave'} color={Colors.highlightGreen} />
                            <Text style={styles.indicatortext}>{this.state.message}</Text>
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: WINDOW_WIDTH,
        height: WINDOW_HEIGHT,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#FFFFFF80',
    },
    innercontainer: {
        borderRadius: 20,
        backgroundColor: 'white',
        borderWidth: 1,
        borderColor: Colors.highlightGreen,
        width: 140,
        height: 140,
    },
    indicatorview: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    spinner: {
        alignSelf: 'center',
        justifyContent: 'center',
        marginTop: 30,
    },
    indicatortext: {
        color: Colors.highlightGreen,
        marginTop: 10,
    },
});

export default SpinkitModal;